<template>
  <section class="myMessage">
    <el-col :span="24" style="padding-bottom: 0px;">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="待审批" name="first">
          <!--工具条-->
          <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
              <el-form-item>
                <el-input v-model="filters.name" placeholder="姓名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" v-on:click="getList">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-table
            :data="formList"
            highlight-current-row
            v-loading="listLoading"
            @selection-change="selsChange"
            style="width: 100%;"
            height="65vh"
          >
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="custname" label="采购类型" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.buyType == 0">紧急采购</div>
                <div v-if="scope.row.buyType == 1">零星采购</div>
                <div v-if="scope.row.buyType == 2">合同采购</div>
              </template>
            </el-table-column>
            <el-table-column prop="psnname" label="请购人" align="center"></el-table-column>
            <el-table-column prop="unitname" label="公司" align="center"></el-table-column>
            <el-table-column prop="custname" label="供应商" align="center"></el-table-column>
            <el-table-column label="操作" width="150" fixed="right" align="center">
              <template slot-scope="scope">
                <!-- <el-button type="primary" size="small" @click="seeContrastForm(scope.$index, scope.row)">查看比较单</el-button> -->
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                <!-- <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="消息通知" name="second">
          <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
              <el-form-item>
                <!-- <el-radio-group v-model="isRead" @change="radioChange">
                  <el-radio label="0">未读消息</el-radio>
                  <el-radio label="1">全部消息</el-radio>
                </el-radio-group>-->
                <el-checkbox v-model="isReadCheckbox" @change="checkboxChange">未读消息</el-checkbox>
              </el-form-item>
              <el-form-item style="float:right">
                <el-button type="primary" v-on:click="setHasRead()">标记已读</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-table
            :data="newList"
            highlight-current-row
            v-loading="listLoading"
            @selection-change="handleSelectionChange"
            style="width: 100%;"
            height="66vh"
            :row-class-name="tableRowClassName"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="TITLE" label="标题" align="center"></el-table-column>
            <el-table-column prop="CREATETIME" label="创建时间" align="center"></el-table-column>
            <el-table-column prop="CONTENT" label="消息内容" align="center"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="采购消息" name="three">
          <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
              <el-form-item>
                <el-input v-model="filters.psnname" placeholder="请购人姓名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" v-on:click="getList">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-table
            :data="buyList"
            highlight-current-row
            v-loading="listLoading"
            @selection-change="selsChange"
            style="width: 100%;"
            height="65vh"
          >
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="buyType" label="采购类型" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.buyType == 0">紧急采购</div>
                <div v-if="scope.row.buyType == 1">零星采购</div>
                <div v-if="scope.row.buyType == 2">合同采购</div>
              </template>
            </el-table-column>
            <el-table-column prop="psnname" label="请购人" align="center"></el-table-column>
            <el-table-column prop="type" label="单据状态" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.type == 2">待审批</div>
                <div v-if="scope.row.type == 4">不通过</div>
                <div v-if="scope.row.type == 9">审批流结束</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button size="small" @click="buyMessageDetail(scope.$index, scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-col>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="20"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>
    <!--编辑界面-->
    <el-dialog title="修改询价单" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <inquiryForm></inquiryForm>
    </el-dialog>
    <!--新增界面-->
    <el-dialog title="新增询价单" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <inquiryForm></inquiryForm>
    </el-dialog>
  </section>
</template>

<script>
import util from "../../common/js/util";
import inquiryForm from "./components/inquiryForm";
import {
  wlcSysInquiryRemove,
  wlcSysInquiryListNotice,
  wlcNoticeList,
  wlcNoticeRsRead,
  wlcPurchaseOrderLogListNotice,
} from "../../api/api";

export default {
  components: {
    inquiryForm,
  },
  data() {
    return {
      activeName: "first",
      filters: {
        name: "",
        psnname: "", //请购人姓名
      },
      formList: [],
      newList: [],
      buyList: [],
      total: 0,
      page: {
        page: 1,
        pageSize: 10,
      },
      listLoading: false,
      sels: [], //列表选中列

      editFormVisible: false, //编辑界面是否显示
      editLoading: false,
      editFormRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      },
      //编辑界面数据
      editForm: {
        id: 0,
        name: "",
        sex: -1,
        age: 0,
        birth: "",
        addr: "",
      },

      addFormVisible: false, //新增界面是否显示
      addLoading: false,
      addFormRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      },
      //新增界面数据
      addForm: {
        name: "",
        sex: -1,
        age: 0,
        birth: "",
        addr: "",
      },
      //判断显示全部还是未读消息 消息通知
      isRead: "0",
      multipleSelection: [], //选中的消息
      isReadCheckbox: true,
    };
  },
  methods: {
    //采购消息列表  点击详情
    buyMessageDetail(index, item) {
      if (item.orderType == 0) {
        this.$router.push({ path: "buyOrderDetail", query: { id: item.id } });
      }
      if (item.orderType == 1) {
        this.$router.push({
          path: "purchaseOrderDetial",
          query: { id: item.id },
        });
      }
    },
    checkboxChange(e) {
      if (e) {
        this.isRead = "0";
      } else {
        this.isRead = "1";
      }
      this.getNewList();
    },
    //标记为已读
    setHasRead() {
      console.log(this.multipleSelection);
      let arr = this.multipleSelection;
      let param = [];
      for (let i = 0; i < arr.length; i++) {
        let obj = {
          id: arr[i].ID,
        };
        param.push(obj);
      }
      wlcNoticeRsRead(param).then((res) => {
        console.log(res);
        this.getNewList();
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.ISREAD == 0) {
        return "noRead";
      } else {
        return "hasRead";
      }
    },
    //列表选择  消息通知
    handleSelectionChange(e) {
      this.multipleSelection = e;
    },
    //选择未读消息还是全部消息
    radioChange(e) {
      this.getNewList();
    },
    //点击tab
    handleClick(tab) {
      this.page.page = 1;
      this.getDataList();
    },
    getDataList() {
      let tab = this.activeName;
      if (tab == "first") {
        this.getList();
      }
      if (tab == "second") {
        this.getNewList();
      }
      if (tab == "three") {
        this.getPurchaseList();
      }
    },
    //性别显示转换
    formatSex: function (row, column) {
      return row.sex == 1 ? "男" : row.sex == 0 ? "女" : "未知";
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getDataList();
    },
    //查看比较单
    seeContrastForm() {
      this.$router.push({ path: "productContrast" });
    },
    //获取列表
    getList() {
      let para = {
        page: this.page,
        // name: this.filters.name
      };
      this.listLoading = true;
      wlcSysInquiryListNotice(para).then((res) => {
        this.total = res.total;
        this.formList = res.records;
        this.listLoading = false;
        this.$store.commit("setMessageNum", res.total);
      });
    },
    getNewList() {
      let param = {
        isRead: this.isRead,
        page: this.page,
      };
      this.listLoading = true;
      wlcNoticeList(param).then((res) => {
        this.listLoading = false;
        this.newList = res.records || [];
      });
    },
    //采购订单
    getPurchaseList() {
      let para = {
        page: this.page,
      };
      this.listLoading = true;
      wlcPurchaseOrderLogListNotice(para).then((res) => {
        this.listLoading = false;
        this.buyList = res.records;
      });
    },
    //删除
    handleDel: function (index, row) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          let para = { id: row.id };
          wlcSysInquiryRemove([para]).then((res) => {
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getList();
          });
        })
        .catch(() => {});
    },
    //显示编辑界面
    handleEdit(index, row) {
      console.log(row);
      if (row.isLast == "Y") {
        //是否为最终确认单
        this.$router.push({ path: "department", query: { id: row.id } });
        return;
      }
      // 判断是否为汇总询价单
      if (row.summary == "Y") {
        this.$router.push({ path: "purSumList", query: { id: row.id } });
        return;
      }
      if (row.isInquiry == "Y") {
        this.$router.push({ path: "inquiryForm", query: { id: row.id } });
      } else {
        this.$router.push({
          path: "purchForm",
          query: { id: row.id, buyType: row.buyType },
        });
      }
    },
    //显示新增界面
    handleAdd: function () {
      this.$router.push({ path: "inquiryForm" });
      // this.addFormVisible = true;
      // this.addForm = {
      //   name: "",
      //   sex: -1,
      //   age: 0,
      //   birth: "",
      //   addr: ""
      // };
    },
    selsChange: function (sels) {
      this.sels = sels;
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="less">
.myMessage {
  .noRead {
    color: #333;
  }
  .hasRead {
    color: #999;
  }
}
</style>
